<template>
	<view class='panicBuying'>
		<view class="header">
			<view class="title">
				抢购
			</view>
			<view class='session' v-if='sessionList.length==3'>
				<view class='session-item'
					:class="{'session-item-ative session-item-ative3-1': index==0&&sessionIndex==index,'session3-2': index==1,'session-item-ative session-item-ative3-2':index==1&&sessionIndex==index,'session3-3': index==2,'session-item-ative session-item-ative3-3':index==2&&sessionIndex==index}"
					v-for="(item ,index) in sessionList" :key="index" @tap="changeSession(item,index)">
					<view class='text'>{{item.goodsName}}</view>
				</view>
			</view>
			<view class="session" v-if='sessionList.length==2'>
				<view class='session-item2 '
					:class="{'session2-1': index==0,'session-item-ative2 session-item-ative2-1': index==0&&sessionIndex==index,'session2-2': index==1,'session-item-ative2 session-item-ative2-2': index==1&&sessionIndex==index,}"
					v-for="(item ,index) in sessionList" :key="index" @tap="changeSession(item,index)">
					<view class='text'>{{item.goodsName}}</view>
				</view>
			</view>
		</view>

		<view class='list'>
			<view class='goods_item_box' v-for="(item,index) in list" :key="index">
				<view class='icon'>
					<image v-if='item.sectionEnd==500' src="@/static/static-home/image-21.png" class='iconSize' mode="">
					</image>
					<image v-else-if='item.sectionEnd==1000' src="@/static/static-home/image-23.png" class='iconSize'
						mode=""></image>
					<image v-else src="@/static/static-home/image-24.png" class='iconSize' mode=""></image>
				</view>
				<view class='header-time'>
					<view class='label1'>限时抢购</view>
					<view  class='label2' v-if="item.state == 1" style='display: flex; align-items: center;'>距离结束：
					<countDownTime :targetTimestamp="item.endTimestamp" />
					</view>
					<view class='label2' v-if="item.state == 3 || item.state == 0 || item.state == 2" > {{ item.appointEndTimestamp > item.appointTimestamp && nowTimeStamp < item.appointTimestamp?'预约开始':'距离抢购'}} </view>
					<countDownTime v-if="item.state == 3 || item.state == 0 || item.state == 2" :targetTimestamp="item.state == 1 || item.state == 3?item.endTimestamp:item.state == 0?item.nextTimestamp:''" />
				</view>
				<view class='goods_box_Icon'>
					<view class="icon_left">

					</view>
					<view class='right'>
						<view class='label1'> <span class='session-time'>{{item.goodsName}}</span>
							{{item.sectionBegin}}~{{item.sectionEnd}}元专区 </view>
						<view class='label2'>已预约人数：<span class="person">{{item.appointCount}}人</span></view>
						<view class='label3'>收益率：<span class='rate'>{{item.profitPercent}}% ~ {{item.profitPercentMax}}%
							</span></view>
					</view>
					
					<view class="submit btn" v-if="item.state != 0" :style="(item.state == 3 && item.haveAppointed == 1) || item.state == 1 && item.leaveCount == 0?'background: #FFF3F3;color: #FA2F30':item.state == 2?'background:#C2C8D3':''" @tap="goDetail(item)">{{item.state == 3?item.haveAppointed == 1?'已预约':'预约' :item.state == 1?item.leaveCount == 0?'已售罄':'抢购':item.state == 2?'已结束':''}}</view>
					
				</view>

			</view>

		</view>
		
		<uni-popup ref='popup' type="bottom" :mask-click="false">
			<view class='time'>
				<image src="@/static/statc-icon/close.png" @click='closeProp' class='close' mode=""></image>
				<view class='title'>
					{{selectGoods.goodsName}}
				</view>
				<view class='payWay' style="margin-bottom: 40rpx;">
					<div class='label'>支付方式</div>
					<div class="payList">
						<view class="prop-type-item" :class="{'prop-type-item-active':walletId == item.id}" v-for="(item,index) in walletType" :key="index" @tap="changeWalletType(item)">
							{{item.title}}
						</view>
					</div>
				</view>
				<view class='payWay' style="margin-bottom: 40rpx;">
					<div class='label'>预约数量</div>
					<div class="payList">
						<view class='counter'>
							<view class='subtraction' @click="handleCount(1)">
						
							</view>
							<view class='num'> {{num}} </view>
							<view class='add' @click='handleCount(2)'>
						
							</view>
						</view>
					</div>
				</view>
				<view class='payWay'>
					<div class='label'>支付密码</div>
					<div class="payList" style="display: flex;">
						<input placeholder="请输入支付密码" class="input-prop" placeholder-class="placeholder" type="number" v-model="payPassword"/>
					</div>
				</view>
				<view class="btn" @tap="sure">确认并支付订单</view>
				
			</view>
		</uni-popup>
		<uni-tabbar></uni-tabbar>
	</view>

</template>

<script>
	import {
		goodsListBuy,
		appVersionInfo,
		sessionList,
		addressList,
		appointment
	} from '../../api/api.js'
	import countDownTime from "@/components/basicComponents/countdown.vue"
	export default {
		name: 'panicBuying',
		data() {
			return {
				list: [], // 商品列表
				state: '', // 状态0还未到1抢购中2已过期3可预约
				time: '', // 倒计时
				appInfo: '',
				noticeInfo: '',
				interval: '',
				timestamp: '',
				sessionList: [],
				sessionIndex: 0,
				nowTimeStamp: Date.now(), // 当前的时间戳
				timeString: '',
				addressList: [],
				addressId: '',
				isProp: false,
				payPassword: '',
				walletId: 1,
				walletType: [{
						id: 1,
						title: '多多券'
					},
					{
						id: 2,
						title: '快乐豆'
					},
					{
						id: 3,
						title: '多多券+快乐豆'
					},
				],
				goodsId: '',
				selectGoods:{},
				num: 1,
			}
		},
		components:{
			countDownTime
		},
		onShow() {
			this.pageNum = 1
			this.list = []
			// 查询场次列表
			this.getSessionList()
			// 获取地址列表
			this.getAddressList()
			//#ifdef APP-PLUS
			// 获取app版本信息
			// this.getAppVersionInfo()
			//#endif
			clearInterval(this.interval)
		},
		methods: {
			sure() {
				uni.showLoading({
					title: ''
				});
				let data = {
					goodsId:this.goodsId,
					addressId:this.addressId,
					walletType:this.walletId,
					payPassword:this.payPassword,
					quantity:this.num
				}
				appointment(data).then( res=> {
					uni.hideLoading()
					uni.showToast({
						title:'预约成功',
						icon:'none'
					})
					this.closeProp()
				})
			},
			handleCount(type) {
				if (type == 1) {
			
					if (this.num <= 0) {
						this.num = 0
						returnn
					}
					this.num--
				}
				if (type == 2) {
					this.num++
				}
			},
			closeProp() {
				this.$refs.popup.close()
				this.payPassword = '',
				this.num = 1
			},
			changeWalletType(item) {
				this.walletId = item.id
			},
			goDetail(item) {
				this.selectGoods = item
				if( item.state == 3 ) {  // 预约
				    if( item.haveAppointed == 1 ) {  // 已预约
					    return
				    }
					if( this.addressList.length == 0 ) {
						uni.showToast({
							title:'请先添加默认地址',
							icon:'none'
						})
						return
					}
					this.goodsId = item.goodsId
					this.$refs.popup.open('bottom')
				}else if( item.state == 1 ) {  // 抢拍
					var orderInfo = {
						goodsImg:item.imageUrl,
						goodsId:item.goodsId,
						goodsTitle:item.goodsName,
						goodsPrice:item.nowPrice,
						goodsNum:1,
					}
					var orderInfo = JSON.stringify(orderInfo)
					uni.navigateTo({
						url:'../goods/submitOrder?orderInfo=' + orderInfo + '&payType=1'+ '&isVip=0'
					})
				}else if( item.state == 2 ) {  // 已结束
					uni.showToast({
						title:'当前抢购已结束，请等待下一场抢购',
						icon:'none'
					})
				}
				// uni.navigateTo({
				// 	url:'/pages/index/goodsDetail?goodsId=' + item.goodsId + '&timestamp=' + this.timestamp
				// })
			},
			// 获取地址列表
			getAddressList() {
				let data = {}
				addressList(data).then(res => {
					this.addressList = res.data
					// 如果没有添加地址,提示去添加
					if (this.addressList.length == 0) {
						this.addresssInfo = ''
					} else if (this.addressList.length == 1) {
						// 如果只有一个地址,直接显示为默认
						this.addresssInfo = this.addressList[0]
						this.addressId = this.addressList[0].id
					} else if (this.addressList.length > 1) {
						// 如果存在多个地址,先判断是否有默认地址
						let isHaveDefault = this.addressList.some(item => item.isDefault == 1)
						// 如果有,查询默认地址
						if (isHaveDefault) {
							this.addressList.forEach(item => {
								if (item.isDefault == 1) {
									this.addresssInfo = item
									this.addressId = item.id
								}
							})
						} else {
							// 如果没有,默认第一条地址
							this.addresssInfo = this.addressList[0]
							this.addressId = this.addressList[0].id
						}
					}
				})
			},
			// 查询场次列表
			getSessionList() {
				let data = {}
				sessionList(data).then(res => {
					this.sessionList = res.data.list
					// 获取倒计时
					this.getCountDown()
					// 查询拍卖商品列表
					this.getList()
				})
			},
			// 获取倒计时
			getCountDown() {
				var that = this
				that.state = that.sessionList[that.sessionIndex].state
				that.interval = setInterval(function() {
					that.time = that.countDown(that.sessionList[that.sessionIndex].nextTimestamp)
				}, 1000)
			},
			changeSession(item, index) {
				this.nowTimeStamp = Date.now()
				this.sessionIndex = index
				// 获取倒计时
				this.getCountDown()
				// 查询拍卖商品列表
				this.getList()
			},
			
			// 查询拍卖商品列表
			getList(goodsId) {
				let data = {
					sessionId: this.sessionList[this.sessionIndex].goodsId,
				}
				goodsListBuy(data).then(res => {
					this.list = res.data
					if (res.data[0].state == 1) {
						this.timeString = this.formatTime(new Date(res.data[0].endTimestamp),
							"yyyy-MM-dd hh:mm:ss")
					} else if (res.data[0].state == 3 || res.data[0].state == 0 || res.data[0].state == 2) {
						if (res.data[0].appointEndTimestamp > res.data[0].appointTimestamp && this.nowTimeStamp <
							res.data[0].appointTimestamp) {
							this.timeString = this.formatTime(new Date(res.data[0].appointTimestamp),
								"yyyy-MM-dd hh:mm:ss")
						} else {
							this.timeString = this.formatTime(new Date(res.data[0].nextTimestamp),
								"yyyy-MM-dd hh:mm:ss")
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	page {
		
		background: rgb(217, 255, 130);
		background: linear-gradient(180deg, rgba(217, 255, 130, 1) 27%, rgba(166, 255, 144, 1) 100%);
		
	}

	.panicBuying .header {
		width: 100%;
		height: 346rpx;
		background: url("@/static/static-home/image-10.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding: 0 40rpx;
		box-sizing: border-box;

	}
	
	.panicBuying  .list{
		width: 100%;
		/* height: calc(100vh - 346rpx);
		overflow-y:auto; */
	}

	.panicBuying .header .title {
		position: absolute;
		top: 100rpx;
		left: 40rpx;
		font-weight: bold;
		font-size: 44rpx;
		color: #3C3C3C;
	}

	.panicBuying .header .session {
		display: flex;
		margin: 0 auto;
		position: absolute;
		width: 100%;
		height: 132rpx;
		bottom: 40rpx;
		left: 50%;
		right: 50%;
		transform: translateX(-43%);
	}

	.panicBuying .header .session .session-item {
		width: 222rpx;
		height: 132rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-weight: 400;
		font-size: 34rpx;
		color: #00C538;
	}

	.panicBuying .header .session .session-item .text {
		width: 222rpx;
		height: 86rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.panicBuying .header .session .session-item:first-child {
		background: url("@/static/static-home/image-14.png") no-repeat;
		background-size: contain;
		background-position: 0 30px
	}

	.panicBuying .header .session .session3-2 {
		background: url("@/static/static-home/image-15.png") no-repeat;
		background-size: contain;
		background-position: 0 30px;
	}

	.panicBuying .header .session .session3-3 {
		background: url("@/static/static-home/image-16.png") no-repeat;
		background-size: contain;
		background-position: 0 30px;
	}

	.panicBuying .header .session .session-item-ative {
		width: 222rpx;
		height: 132rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #373737;

	}

	.panicBuying .header .session .session-item-ative3-1 {
		background: url("@/static/static-home/image-11.png") no-repeat !important;
		background-size: cover !important;
	}

	.panicBuying .header .session .session-item-ative3-2 {
		background: url("@/static/static-home/image-12.png") no-repeat !important;
		background-size: cover !important;
	}

	.panicBuying .header .session .session-item-ative3-3 {
		background: url("@/static/static-home/image-13.png") no-repeat !important;
		background-size: cover !important;
	}


	.panicBuying .header .session .session-item2 {
		width: 334rpx;
		height: 132rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-weight: 400;
		font-size: 34rpx;
		color: #00C538;
	}

	.panicBuying .header .session .session-item2:first-child {
		background: url("@/static/static-home/image-17.png") no-repeat;
		background-size: contain;
		background-position: 0 40rpx;
	}

	.panicBuying .header .session .session-item2:last-child {
		background: url("@/static/static-home/image-19.png") no-repeat;
		background-size: contain;
		background-position: 0 40rpx;
	}

	.panicBuying .header .session .session-item-ative2-1 {
		background: url("@/static/static-home/image-18.png") no-repeat !important;
		background-size: cover !important;
	}

	.panicBuying .header .session .session-item-ative2-2 {
		background: url("@/static/static-home/image-20.png") no-repeat !important;
		background-size: cover !important;
	}

	.panicBuying .header .session .session-item-ative2 {
		width: 334rpx;
		height: 132rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #373737;
	}

	.panicBuying .header .session .session-item2 .text {
		height: 65rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		width: 100%;
		padding-bottom: 100rpx;
	}

	.goods_item_box {
		width: 710rpx;
		height: 330rpx;
		background: url("@/static/static-home/image-25.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		margin-bottom: 20rpx;
	}

	.goods_item_box .icon {
		position: absolute;
		width: 120rpx;
		height: 120rpx;
		top: -10rpx;
		right: 42rpx;
	}

	.goods_item_box .icon .iconSize {
		width: 100%;
		height: 100%;
	}

	.goods_item_box .header-time {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}

	.goods_item_box .header-time .label1 {
		font-weight: bold;
		font-size: 36rpx;
		color: #3C3C3C;
	}

	.goods_item_box .header-time .label2 {
		font-weight: 400;
		font-size: 26rpx;
		color: #444444;
		margin-right: 10rpx;
	}

	.goods_item_box .header-time .label2:before {
		content: '';
		display: inline-flex;
		width: 2rpx;
		height: 19rpx;
		background: #626262;
		margin: 0 14rpx 0 10rpx;
		box-sizing: border-box;
	}

	.goods_item_box .goods_box_Icon {
		width: 670rpx;
		height: 200rpx;
		background: #F1FFD3;
		border-radius: 40rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.goods_item_box .goods_box_Icon .icon_left {
		width: 160rpx;
		height: 160rpx;
		background: url("@/static/static-home/image-22.png") no-repeat;
		background-size: 100% 100%;

	}

	.goods_item_box .goods_box_Icon .right {
		flex: 1;
		width: 100%;
		height: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;

	}

	.goods_item_box .goods_box_Icon .right .label1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #626262;
	}

	.goods_item_box .goods_box_Icon .right .label1 .session-time {
		font-weight: bold;
		font-size: 30rpx;
		color: #3C3C3C;
		margin-right: 8rpx;
	}

	.goods_item_box .goods_box_Icon .right .label2 {
		font-weight: 400;
		font-size: 26rpx;
		color: #ABABAB;
	}

	.goods_item_box .goods_box_Icon .right .label2 .person {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.goods_item_box .goods_box_Icon .right .label3 {
		font-weight: 400;
		font-size: 26rpx;
		color: #B0B0B0;
	}

	.goods_item_box .goods_box_Icon .right .label3 .rate {
		color: #FF3F3C;
	}


	.goods_item_box .goods_box_Icon .btn {
		position: absolute;
		bottom: 22rpx;
		right: 20rpx;
		width: 120rpx;
		height: 52rpx;
		background: linear-gradient(90deg, #FF8938 0%, #FC2D63 100%);
		border-radius: 76px 76px 76px 76px;
		font-weight: 400;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
	}
	
	.time{
		width: 100vw;
		height: 692rpx;
		background: #FFFFFF;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		position: relative;
		padding: 30rpx  40rpx;
		box-sizing: border-box;
		z-index: 1000;
	}
	.time .close{
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		right: 40rpx;
	}
	.time .title{
		font-weight: 400;
		font-size: 36rpx;
		color: #3C3C3C;
		margin-bottom: 57rpx;
	}
	
	.payWay .label{
		font-weight: 400;
		font-size: 30rpx;
		color: #757576;
		margin-bottom: 20rpx;
	}
	.payWay .payList{
		display: grid;
		grid-template-columns: repeat(3,1fr);
	}
	.payWay .payList input{
		width: 100%;
	}
	.payWay .payList .prop-type-item{
		width: 206rpx;
		height: 84rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #BCBDBD;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #F5F5F5;
	}
	.payWay .payList .prop-type-item-active{
		color: #E95D49;
		background: #FFF5F4;
		border: 2rpx solid #E95D49;
	}
	.counter {
		display: flex;
		align-items: center;
	}
	
	.counter .subtraction {
		width: 48rpx;
		height: 48rpx;
		background: url("@/static/statc-icon/image-5.png") no-repeat;
		background-size: 100% 100%;
	}
	
	.counter .num {
		width: 100rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
	}
	
	.counter .add {
		width: 48rpx;
		height: 48rpx;
		background: url("@/static/statc-icon/image-6.png") no-repeat;
		background-size: 100% 100%;
	
	}
	.btn{
		width: 670rpx;
		height: 88rpx;
		background: linear-gradient( 90deg, #FF7A3F 0%, #FC3260 100%);
		border-radius: 112rpx;
		margin: 0 auto;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}
.uni-popup{
	z-index: 999;
}
</style>
